<template>
  <div class="login-box">
    <div class="center-text">
        <p class="title">基于vue+springboot的oa管理系统</p>
        <el-form :label-position="labelPosition" :rules="loginRules" ref="loginRuleForm" label-width="70px" :model="loginForm" class="login-form">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <label slot="label">密&emsp;码</label>
                <el-input v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="imgCode">
                <el-input v-model="loginForm.imgCode" placeholder="输入验证码(不区分大小写)" size="large" style="width:67%"/>
                <img :src="imgUrl" @click="changeImg" alt="暂无图片" class="code-img">
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn" type="success" @click="toLogin('loginRuleForm')">登录</el-button>
                <el-button type="info" @click="resetLogin('loginRuleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
        login_prefix:"/user",
        loginForm:{
            userName:"",
            password:"",
            imgCode:""
        },
        imgUrl:"",
        labelPosition:'left',
        loginRules:{
            userName:[
                { required: true, message: '请输入用户名称', trigger: 'blur' },
                { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
            ],
            password:[
                { required: true, message: '请输入登录密码', trigger: 'blur' }
            ],
            imgCode:[
                { required: true, message: '请输入验证码', trigger: 'blur' }
            ]
        }
    }
  },
  created(){
      this.getImageCode();
  },
  methods:{
    //登录
    toLogin(loginRuleForm){
        this.$refs[loginRuleForm].validate((valid) => {
            if (valid) {
                this.$http.post(this.login_prefix+"/userLogin",this.loginForm).then((res)=>{
                    // console.log(res);
                    if (res.code === 200){                       
                        sessionStorage.setItem("token",res.data.token);
                        sessionStorage.setItem("user",JSON.stringify(res.data.currUser));
                        this.$router.push("/index");
                        this.$message.success('登录成功!!!');
                    }else {
                        this.getImageCode();
                        this.$message.error('用户名或密码错误!!!');
                    }
                }).catch((err)=>{
                  console.error(err);
                    this.$message.error('系统异常,请联系管理员!!!');
                });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    // 重置
    resetLogin(loginRuleForm){
        this.$refs[loginRuleForm].resetFields();
    },
    //图片验证码
    getImageCode(){
        // this.imgUrl = "../assets/images/login-background.jpg";
        this.imgUrl=this.$http.defaults.baseURL+this.login_prefix+"/getImageCode?d="+new Date();
    },
    // 获取图片验证码
    changeImg(){
        this.getImageCode();
    }
  }
}
</script>

<style scoped>
    .login-box{
        /* height: 720px; */
        background: url("../assets/images/oa3.jpg");
        /* 将图片样式不重复 */
        background-repeat: no-repeat;
        /* 设置图片大小 */
        background-size: 100% 100%;
        /* 充满全屏 */
        position: fixed;
        /* 设置div高度 */
        height: 100%;
        /* 设置div宽度 */
        width: 100%;
    }
    /* 表单 */
    .login-box .center-text{
        width:30%;
        height: 325px;
        margin-left: 10%;
        margin-top: 8%;
        border-radius: 8%;
        /* background-image: linear-gradient(90deg, #eeece0 0%, #bdaba0 100%); */
        background-image: linear-gradient(rgb(117, 181, 246));
        opacity: 0.7;
        
    }

    /* 标题 */
    .center-text .title{
        font-size: 20px;
        text-align: center;
        margin-top: 0px;
        padding-top: 20px;
    }

    .login-form{
        padding: 0px 20px 0 10px;
    }

    /* 验证码 */
    .center-text .code-img{
        width: 8%;
        height: 41.5px;
        position: fixed;
        border-radius: 8%;
    }
</style>
